// 引入内置包

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const { resolve } = require("path");

module.exports = {
    mode: "development",

    // 指定入口文件
    entry: "./src/index.ts",

    // 出口
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",

        // 箭头函数不使用
        environment : {
            arrowFunction : false
        }
    },

    // 指定的webpack打包时要使用模块
    module: {
        // 指定loader规则
        rules : [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 使用的包,单个可以写成字符串，多个写成数组
                use: [
                    // 配置babel，这个比较复杂，所以需要写一些配置
                    {
                        loader : "babel-loader",
                        options : {
                            presets: [[
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 兼容到谷歌浏览器版本 88
                                    targets: {
                                        "chrome" : 58,
                                        // "ie" : 11
                                    },
                                    // 看下载的版本写数字，当使用新语法target内的浏览器版本没有时，就起作用了
                                    "corejs": 3,
                                    // 使用corejs的方式 
                                    "useBuiltIns" : "usage"  // "usage" 表示按需加载
                                }
                            ]]
                        }
                    },'ts-loader'],
                // 要删除的包
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use : [
                    "style-loader",
                    "css-loader",
                    // 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions : {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            // 兼容最近的两个浏览器版本
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 以什么模板生成html文件。
            template: "./public/index.html"
        }),
    ],

    // 设置哪些文件作为模块，入口可以用引入去定位这些文件
    resolve : {
        extensions: ['.js','.ts']
    }
}